<template>
  <view class="address-list font-32 df fdc jc-sb" :style="my_style">
    <view class="address-list-top">
      <u-checkbox-group>
        <common-list class="w100" @load="getAddressList" :list="list" :status="status">
          <template #list>
            <u-swipe-action
              class="u-m-b-20"
              style="width: 100vw; background: #f5f5f5;"
              v-for="(item, index) in list"
              :key="item.id"
              :show="item.show"
              :index="index"
              @click="clickItem"
              @open="openItem"
              :options="options"
            >
              <view class="item" @click.stop="skipPage(item)">
                <view class="item-top border-bottom1">
                  <view class="lh-44 font-32 u-m-b-24">
                    <text class="u-m-r-80">收货人：{{ item.name }}</text>
                    <text>{{ item.mobile }}</text>
                  </view>
                  <view class="">{{ item.full_address }}</view>
                </view>
                <view class="item-bottom flex-between" @click.stop="stopClick">
                  <u-checkbox
                    :value="item.is_default == 1 ? true : false"
                    shape="circle"
                    :active-color="theme_color"
                    @change="checkboxChange($event, index, item.id)"
                  >
                    设为默认</u-checkbox
                  >
                  <text
                    @click.stop="jump(`/views/user/address/new_address?id=${item.id}`)"
                    class="item-bottom-btn flex-center"
                    >编辑地址</text
                  >
                </view>
              </view>
            </u-swipe-action>
          </template>
          <template #empty>
            <empty text="地址列表空空如也～"></empty>
          </template>
        </common-list>
      </u-checkbox-group>
    </view>
    <view class="bg-white u-p-l-24 u-p-r-24 u-p-t-16 u-p-b-16 white-color">
      <view class="btn" @tap="jump('/views/user/address/new_address')">新增地址</view>
    </view>
    <!-- 确认删除 -->
    <confirm-alert
      :show.sync="show_confirm"
      confirm-title="您确定要删除已选地址吗？"
      @confirm="confirmDel"
    />
  </view>
</template>

<script>
  export default {
    data() {
      return {
        show_confirm: false,
        del_index: -1, // 选择删除
        list: [],
        status: 'loading',
        name: '',
        disabled: false,
        btnWidth: 180,
        show: false,
        options: [
          {
            text: '删除',
            style: {
              backgroundColor: '#FF5252',
            },
          },
        ],
      }
    },
    onLoad(options) {
      this.name = options.name || ''
      this.getAddressList()
    },
    methods: {
      /**
       * 用户地址-设置默认地址
       */
      async checkboxChange(e, index, id) {
        if (this.list[index].is_default === 1) {
          return
        }
        let params = {
          id,
        }
        const res = await this.$api.common.user('setDefaultAddress', params)
        if (res.code === 200) {
          this.list.map((item) => {
            item.is_default = 0
          })
          this.$set(this.list[index], 'is_default', 1)
          this.showMsg('修改成功', 'success')
        }
      },
      // 获取用户收获地址
      async getAddressList() {
        const res = await this.$api.common.user('getAddressList')
        if (res.code === 200) {
          this.list = res.data
          this.list.map((val) => {
            val.show = false
          })
          this.status = 'nomore'
        }
      },
      clickItem(index) {
        this.del_index = index
        this.show_confirm = true
      },
      cancelDel() {
        this.del_index = ''
        this.show_confirm = false
      },
      /**
       * 用户地址-删除地址
       */
      async confirmDel() {
        let params = {
          id: this.list[this.del_index].id,
        }
        const res = await this.$api.common.user('deleteAddress', params)
        if (res.code === 200) {
          this.list.splice(this.del_index, 1)
          this.show_confirm = false
          this.$u.toast('删除成功')
          this.refreshLast()
        }
      },
      // 如果打开一个的时候，不需要关闭其他，则无需实现本方法
      openItem(index) {
        // 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
        // 原本为'false'，再次设置为'false'会无效
        this.list[index].show = true
        this.list.map((val, idx) => {
          if (index != idx) this.list[idx].show = false
        })
      },
      skipPage(item) {
        // 从订单确认来
        if (this.name == 'order') {
          // 获取页面栈
          let pages = getCurrentPages()
          if (pages.length > 1) {
            // 上一个页面实例对象
            let prePage = pages[pages.length - 2]
            // 关键在这里,这里面是触发上个界面
            // prePage.getAddress(item)
            // #ifdef H5
            prePage.member_address = item
            // #endif
            // #ifdef MP-WEIXIN||APP-PLUS
            prePage.$vm.member_address = item
            // #endif
          }
          uni.navigateBack()
        }
        if (this.name == 'gift') {
          // 获取页面栈
          let pages = getCurrentPages()
          if (pages.length > 1) {
            // 上一个页面实例对象
            let prePage = pages[pages.length - 2]
            // 关键在这里,这里面是触发上个界面
            // prePage.getAddress(item)
            // #ifdef H5
            prePage.member_address_id = +item.id
            // #endif
            // #ifdef MP-WEIXIN||APP-PLUS
            prePage.$vm.member_address_id = +item.id
            // #endif
          }
          uni.navigateBack()
        }
      },
      // 返回上一页
      refreshLast() {
        // 获取页面栈
        let pages = getCurrentPages()
        if (pages.length > 1) {
          // 上一个页面实例对象
          let prePage = pages[pages.length - 2]
          if (prePage.route === 'views/settlement/settlement') {
            // 触发上个界面
            // #ifdef H5
            prePage.orderPayment()
            // #endif
            // #ifdef MP-WEIXIN||APP-PLUS
            prePage.$vm.orderPayment()
            // #endif
          }
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
  .address-list {
    height: 100%;
    background-color: #fafafa;

    &-top {
      flex: 1;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }

    .u-checkbox-group {
      width: 100%;
    }

    .item {
      width: 100%;
      padding: 0 24rpx;

      &:last-child {
        border-bottom: none;
      }

      .item-top {
        padding: 24rpx 0;
      }

      .item-bottom {
        height: 84rpx;

        &-btn {
          width: 180rpx;
          height: 60rpx;
          color: var(--color);
          border: 1px solid var(--color);
          border-radius: 30rpx;
        }
      }
    }

    .btn {
      width: 100%;
      height: 88rpx;
      line-height: 88rpx;
      text-align: center;
      background: var(--color);
      border-radius: 210rpx;
    }
  }
</style>
